<html>
<head>
    <meta charset="utf-8"/>
<meta name="description" content=""/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>

<title>CSS3新增选择器记录 | 絷缘的博客</title>

<link rel="shortcut icon" href="https://zydnc.gitee.io/favicon.ico?v=1732378515642">

<link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://zydnc.gitee.io/styles/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css">

<script src="https://cdn.jsdelivr.net/npm/@highlightjs/cdn-assets/highlight.min.js"></script>
<script src="https://cdn.bootcss.com/highlight.js/9.15.10/languages/dockerfile.min.js"></script>
<script src="https://cdn.bootcss.com/highlight.js/9.15.10/languages/dart.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/moment@2.27.0/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js"></script>
<!-- DEMO JS -->
<!--<script src="media/scripts/index.js"></script>-->



    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.css">
 <script src='//unpkg.com/valine/dist/Valine.min.js'></script>
</head>
<body>
<div class="main gt-bg-theme-color-first">
    <nav class="navbar navbar-expand-lg">
    <div class="navbar-brand">
        <img class="user-avatar" src="/images/avatar.png" alt="头像">
        <div class="site-name gt-c-content-color-first">
            絷缘的博客
        </div>
    </div>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <i class="fas fa-bars gt-c-content-color-first" style="font-size: 18px"></i>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <div class="navbar-nav mr-auto" style="text-align: center">
            
                <div class="nav-item">
                    
                        <a href="/" class="menu gt-a-link">
                            首页
                        </a>
                    
                </div>
            
                <div class="nav-item">
                    
                        <a href="/archives" class="menu gt-a-link">
                            归档
                        </a>
                    
                </div>
            
                <div class="nav-item">
                    
                        <a href="/tags" class="menu gt-a-link">
                            标签
                        </a>
                    
                </div>
            
                <div class="nav-item">
                    
                        <a href="/about" class="menu gt-a-link">
                            关于
                        </a>
                    
                </div>
            
                <div class="nav-item">
                    
                        <a href="/friends" class="menu gt-a-link">
                            友链
                        </a>
                    
                </div>
            
        </div>
        <div style="text-align: center">
            <form id="gridea-search-form" style="position: relative" data-update="1732378515642" action="/search/index.html">
                <input class="search-input" autocomplete="off" spellcheck="false" name="q" placeholder="搜索文章" />
                <i class="fas fa-search gt-c-content-color-first" style="position: absolute; top: 9px; left: 10px;"></i>
            </form>
        </div>
    </div>
</nav>

    <div class="post-container">
        <div class="post-detail gt-bg-theme-color-second">
            <article class="gt-post-content">
                <h2 class="post-title">
                    CSS3新增选择器记录
                </h2>
                <div class="post-info">
                    <time class="post-time gt-c-content-color-first">
                        · 2021-01-18 ·
                    </time>
                    
                        <a href="https://zydnc.gitee.io/css/" class="post-tags">
                            # CSS
                        </a>
                    
                        <a href="https://zydnc.gitee.io/2WP8Q3KZTb/" class="post-tags">
                            # 前端
                        </a>
                    
                </div>
                <div class="post-content">
                    <h2 id="一-css3以前的选择器">一、CSS3以前的选择器</h2>
<table>
<thead>
<tr>
<th>选择器</th>
<th>概述</th>
<th>例</th>
</tr>
</thead>
<tbody>
<tr>
<td>标签选择器</td>
<td>选择页面中所有指定类型的标签</td>
<td><code>a{}</code></td>
</tr>
<tr>
<td>ID选择器</td>
<td>选择页面中拥有指定ID值的标签</td>
<td><code>#id{}</code></td>
</tr>
<tr>
<td>Class选择器</td>
<td>选择页面中拥有指定Class值的标签</td>
<td><code>.class{}</code></td>
</tr>
<tr>
<td>通配符选择器</td>
<td>选择页面中所有标签</td>
<td><code>*{}</code></td>
</tr>
<tr>
<td>后代选择器</td>
<td>选择指定标签下所有后代元素标签</td>
<td><code>ul li{}</code></td>
</tr>
<tr>
<td>相邻兄弟选择器</td>
<td>选择指定标签同级的向下一个指定元素标签</td>
<td><code>li+li{}</code></td>
</tr>
<tr>
<td>子选择器</td>
<td>选择指定标签下指定类型的直接子元素标签</td>
<td><code>ul &gt; li{}</code></td>
</tr>
<tr>
<td>属性选择器</td>
<td>选择拥有指定属性和属性值的指定类型的标签</td>
<td><code>input[type='password']{}</code></td>
</tr>
<tr>
<td>分组选择器</td>
<td>同时选择多个满足条件的标签</td>
<td><code>html,body,p,ul{}</code></td>
</tr>
<tr>
<td>伪类选择器</td>
<td>一般指a标签等存在交互行为的元素在多种状态下的操作</td>
<td><code>a:hover{}</code> <br><code>a:active{}</code><br> <code>a:visited{}</code><br> <code>input:focus{}</code></td>
</tr>
<tr>
<td>伪元素选择器</td>
<td>DOM中不存在的元素，一般用来协助标签完成特定功能</td>
<td><code>div::before{}</code> <br><code>div::after{}</code> <br><code>p::first-line{}</code> <br><code>p::first-letter{}</code></td>
</tr>
<tr>
<td>过滤选择器</td>
<td>选择指定类型指定属性条件的标签</td>
<td><code>h1.title{}</code></td>
</tr>
</tbody>
</table>
<h2 id="二-css3新增的选择器">二、CSS3新增的选择器</h2>
<table>
<thead>
<tr>
<th>选择器</th>
<th>概述</th>
<th>例</th>
</tr>
</thead>
<tbody>
<tr>
<td>加强属性选择器</td>
<td>在原有属性选择器的基础上增加了类似于字符串匹配的功能</td>
<td><code>input[name^='user']{}</code> <br><code>input[name$='word']{}</code> <br><code>input[name*='name']{}</code></td>
</tr>
<tr>
<td>结构伪类选择器</td>
<td>在之前特定几个伪类的基础上，添加了对子元素选择的支持</td>
<td><code>:root{}</code> <br> <code>ul:nth-child(n){}</code> <br> <code>ul:nth-last-child(n){}</code> <br> <code>ul:nth-of-type(n){}</code> <br> <code>ul:nth-last-of-type(n){}</code> <br> <code>ul:last-child{}</code> <br> <code>ul:first-child{}</code> <br> <code>ul:first-of-type{}</code> <br> <code>ul:last-of-type{}</code> <br> <code>ul:only-child{}</code> <br> <code>ul:only-of-type{}</code> <br> <code>li:empty{}</code></td>
</tr>
<tr>
<td>否定伪类选择器</td>
<td>选择除满足指定选择器的元素外的所有标签元素</td>
<td><code>:not(p){}</code></td>
</tr>
<tr>
<td>通用兄弟选择器</td>
<td>选择指定元素之后的指定条件的多个同级标签元素</td>
<td><code>ul~li{}</code></td>
</tr>
<tr>
<td>目标伪类选择器</td>
<td>选择指定元素指向的锚点处的指定标签元素</td>
<td><code>#id:target{}</code></td>
</tr>
<tr>
<td>状态伪类选择器</td>
<td>选择拥有指定状态的标签元素</td>
<td><code>input:enabled{}</code> <br> <code>input:disabled{}</code> <br> <code>input:checked{}</code> <br> <code>::selection{}</code></td>
</tr>
</tbody>
</table>
<blockquote>
<p>原文作者：絷缘<br>
作者邮箱：zhiyuanworkemail@163.com<br>
原文地址：<a href="https://zhiyuandnc.github.io/ORutvrQMw/">https://zhiyuandnc.github.io/ORutvrQMw/</a><br>
版权声明：本文为博主原创文章，转载请注明原文链接作者信息</p>
</blockquote>

                </div>
            </article>
        </div>

        
            <div class="next-post">
                <div class="next gt-c-content-color-first">下一篇</div>
                <a href="https://zydnc.gitee.io/8Jg7UIzu2/" class="post-title gt-a-link">
                    LayUI学习（1）布局容器
                </a>
            </div>
        

        

        

        

        <div class="site-footer gt-c-content-color-first">
    <div class="slogan gt-c-content-color-first">事实不以人的意志为转移</div>
    <div class="social-container">
        
            
                <a href="#" target="_blank">
                    <i class="fab fa-github gt-c-content-color-first"></i>
                </a>
            
        
            
                <a href="#" target="_blank">
                    <i class="fab fa-telegram gt-c-content-color-first"></i>
                </a>
            
        
            
                <a href="#" target="_blank">
                    <i class="fab fa-qq gt-c-content-color-first"></i>
                </a>
            
        
            
                <a href="#" target="_blank">
                    <i class="fab fa-bilibili gt-c-content-color-first"></i>
                </a>
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
    </div>
    <div class="footer-info">
        Copyright&ensp;&copy;&ensp;絷缘的博客<br/><a href="https://beian.miit.gov.cn/" target="_blank">晋ICP备20001723号-1</a>
    </div>
    <div>
        Theme by <a href="https://imhanjie.com/" target="_blank">imhanjie</a>, Powered by <a
                href="https://github.com/getgridea/gridea" target="_blank">Gridea | <a href="https://zydnc.gitee.io/atom.xml" target="_blank">RSS</a></a>
    </div>
</div>

<script>
  hljs.initHighlightingOnLoad()
</script>

    </div>
</div>
</body>
</html>
